<template>
    <div class="full">
        <div class="full" ref="main"></div>
    </div>
</template>
<script>
import * as echarts from "echarts";
export default {
    data() {
        return {
            chart: null,
        };
    },
    mounted() {
        const ref = this.$refs["main"];

        this.chart = echarts.init(ref);

        this.chart.setOption({
            title: {
                text: "某站点用户访问来源",
                subtext: "纯属虚构",
                left: "center",
            },
            tooltip: {
                trigger: "item",
            },
            legend: {
                orient: "vertical",
                left: "left",
            },
            series: [
                {
                    name: "访问来源",
                    type: "pie",
                    radius: "50%",
                    data: [
                        { value: 1048, name: "搜索引擎" },
                        { value: 735, name: "直接访问" },
                        { value: 580, name: "邮件营销" },
                        { value: 484, name: "联盟广告" },
                        { value: 300, name: "视频广告" },
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: "rgba(0, 0, 0, 0.5)",
                        },
                    },
                },
            ],
        });
    },
};
</script>
<style lang="less" scoped>
</style>
